<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1, user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge,chrome=1">
    <meta name="author" content="王超凡">
    <title></title>
    <script src="./jquery.js"></script>
    <style>
        * {
            box-sizing: border-box;
        }
        
        body {
            margin: 0;
        }
        
        ul {
            list-style: none;
            padding: 0;
            margin: 0;
        }
        
        .lunbotu {
            position: relative;
            margin: 100px auto;
            width: 592px;
            height: 240px;
            border: 1px solid gray;
            overflow: hidden;
        }
        
        .lunbotu-top {
            width: 590px;
            height: 40px;
        }
        
        .lunbotu-top {
            position: relative;
            background: url(./btn_cartoon.gif)no-repeat;
            background-position: 1px 1px;
        }
        
        .span {
            position: absolute;
            width: 100px;
            height: 40px;
            text-align: center;
            line-height: 40px;
            float: right;
            background: url(./btn_cartoon.gif)no-repeat;
            background-position: 0 -100px;
        }
        
        .p {
            float: right;
            line-height: 10px;
        }
        .lunbotu-top span{
            font-size: 14px;
            float: right;
            line-height: 30px;
        }
        .lunbotu-top span:hover{
            color: red;
        }
        .current span {
            font-size: 14px;
            float: left;
            margin-top: 10px;
            line-height: 0px;
        }
        .current span:hover{
            color: red;
            text-decoration:underline;
        }
        .current p{
            font-size: 14px;
            margin-top: 30px;
        }
        .lunbotu-top-dian {
            margin-left: 80px;
            margin-top: 10px;
            float: left;
        }
        
        .lunbotu-top-dian li {
            margin-left: 10px;
            float: left;
            width: 10px;
            height: 10px;
            background: url(./btn_cartoon.gif)no-repeat;
            background-position: 0 -320px;
        }
        
        .lunbotu-top-dian .red {
            width: 10px;
            height: 10px;
            float: left;
            margin-left: 10px;
            background: url(./btn_cartoon.gif)no-repeat;
            background-position: 0px -220px;
            display: block;
        }
        
        .lunbotu-top-anniu {
            float: left;
        }
        
        .lunbotu-top-anniu .prev {
            width: 29px;
            height: 23px;
            background: url(./btn_cartoon.gif)no-repeat;
            background-position: -2px -502px;
            margin-top: 10px;
            margin-left: 5px;
            position: absolute;
        }
        
        .lunbotu-top-anniu .next {
            position: absolute;
            width: 29px;
            height: 23px;
            background: url(./btn_cartoon.gif)no-repeat;
            background-position: -30px -502px;
            margin-top: 10px;
            margin-left: 40px;
        }
        
        .lunbotu-bottom {
            position: absolute;
            width: 592px;
            height: 190px;
        }
        
        .lunbotu-bottom li {
            background-color: white;
            width: 140px;
            height: 170px;
            float: left;
            margin-top: 10px;
            margin-left: 10px;
        }
        
        .current {
            width: 2400px;
            height: 180px;
        }
    </style>
</head>

<body>
    <div class="lunbotu">
        <div class="lunbotu-top">
            <div class="span"></div>
            <div class="lunbotu-top-dian">
                <ul>
                    <li class="red"><span></span></li>
                    <li><span></span></li>
                    <li><span></span></li>
                    <li><span></span></li>
                </ul>
            </div>
            <div class="lunbotu-top-anniu">
                <div class="prev"></div>
                <div class="next"></div>
            </div>
            <span>更多>></span>
        </div>
        <div class="lunbotu-bottom">
            <div class="current">
                <ul>
                    <li>
                        <a href=""><img src="./01.jpg" alt=""></a>
                        <span>海贼王</span>
                        <p>播放：28.276</p>
                    </li>
                    <li>
                        <a href=""><img src="./01.jpg" alt=""></a>
                        <span>海贼王</span>
                        <p>播放：28.276</p>
                    </li>
                    <li>
                        <a href=""><img src="./01.jpg" alt=""></a>
                        <span>海贼王</span>
                        <p>播放：28.276</p>
                    </li>
                    <li>
                        <a href=""><img src="./01.jpg" alt=""></a>
                        <span>海贼王</span>
                        <p>播放：28.276</p>
                    </li>
                    <li>
                        <a href=""><img src="./02.jpg" alt=""></a>
                        <span>海贼王</span>
                        <p>播放：28.276</p>
                    </li>
                    <li>
                        <a href=""><img src="./02.jpg" alt=""></a>
                        <span>海贼王</span>
                        <p>播放：28.276</p>
                    </li>
                    <li>
                        <a href=""><img src="./02.jpg" alt=""></a>
                        <span>海贼王</span>
                        <p>播放：28.276</p>
                    </li>
                    <li>
                        <a href=""><img src="./02.jpg" alt=""></a>
                        <span>海贼王</span>
                        <p>播放：28.276</p>
                    </li>
                    <li>
                        <a href=""><img src="./03.jpg" alt=""></a>
                        <span>海贼王</span>
                        <p>播放：28.276</p>
                    </li>
                    <li>
                        <a href=""><img src="./03.jpg" alt=""></a>
                        <span>海贼王</span>
                        <p>播放：28.276</p>
                    </li>
                    <li>
                        <a href=""><img src="./03.jpg" alt=""></a>
                        <span>海贼王</span>
                        <p>播放：28.276</p>
                    </li>
                    <li>
                        <a href=""><img src="./03.jpg" alt=""></a>
                        <span>海贼王</span>
                        <p>播放：28.276</p>
                    </li>
                    <li>
                        <a href=""><img src="./04.jpg" alt=""></a>
                        <span>海贼王</span>
                        <p>播放：28.276</p>
                    </li>
                    <li>
                        <a href=""><img src="./04.jpg" alt=""></a>
                        <span>海贼王</span>
                        <p>播放：28.276</p>
                    </li>
                    <li>
                        <a href=""><img src="./04.jpg" alt=""></a>
                        <span>海贼王</span>
                        <p>播放：28.276</p>
                    </li>
                    <li>
                        <a href=""><img src="./04.jpg" alt=""></a>
                        <span>海贼王</span>
                        <p>播放：28.276</p>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</body>

</html>
<script>
    var index = 0;
    function Img() {
        $('.lunbotu-bottom').find('.current').stop().animate({ 'margin-left': -600 * index }, 500)
        $('.lunbotu-top-dian li').eq(index).addClass('red').siblings().removeClass('red');
    }
    function prev() {
        //    index = index == 0 ? 3 : index -1
        if (index == 0) {
            index = 3
        } else {
            index = index -1
        }
        Img()
    }
    function next() {
        // index = index == 3 ? 0 : index + 1
        if (index == 3) {
            index = 0
        } else {
            index = index +1
        }
        Img()
    }
    $('.lunbotu-top-dian li').click(function(){
        index = $(this).index();
        Img();
    })
    $('.lunbotu-top-anniu .prev').click(function () {
        prev()
    })
    $('.lunbotu-top-anniu .next').click(function () {
        next()
    })

</script>